import React, { Fragment } from 'react';
import { connect } from 'dva';
import BasePage from './BasePage'
import CurrentLocation from '../components/currentLocation'
import breadArr from '../constant/breadArr'
import { Button, Modal, Form, Select, Input } from 'antd'
import SeekTechnologyTable from '../components/table/seekTechnologyTable'
const { Option } = Select
const { TextArea } = Input;

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 12 },
};

const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};

const functionalMaterialsArr = ["生活垃圾", "农业废物", "工业固体废物", "危险废弃物", "其他"]
const technologyCategoryArr = ["固废分离技术", "循环再利用技术", "减少污染", "分类回收", "其他"]

class SeekTechnologyPage extends React.Component {
    constructor(props) {
        super(props),
        this.state = {
            technologySeekVisible: false
        }
    }

    showModal = () => {
        this.setState({
            technologySeekVisible: true
        })
    }

    showOffModal = () => {
        this.setState({
            technologySeekVisible:false
        })
    }

    onFinish = values => {
        this.props.dispatch({
            type:"seekTechnology/createTechnologySeek",
            data:values
        })

        this.setState({
            technologySeekVisible:false
        })

        setTimeout(() => {
            this.props.dispatch({
                type:"seekTechnology/getSeekTechnologyTableData"
            })
        }, 1000);   
    }

    render() {
        return (
            <BasePage>
                <CurrentLocation breadArr={breadArr.SeekTechnologyPage}></CurrentLocation>
                <Modal
                    title="发布技术征求"
                    visible={this.state.technologySeekVisible}
                    onCancel={this.showOffModal}
                    footer={null}
                >
                    <Form
                        {...layout}
                        name="register"
                        initialValues={{ remember: true }}
                        onFinish={this.onFinish}
                        onFinishFailed={this.onFinishFailed}
                    >

                        <Form.Item
                            label="作用材料"
                            name="functionalMaterials"
                            rules={[{ required: true, message: '请选择作用材料!' }]}
                        >
                            <Select>
                                {functionalMaterialsArr.map((item, index) => {
                                    return (
                                        <Option key={index + 1}>{item}</Option>
                                    )
                                })}
                            </Select>
                        </Form.Item>

                        <Form.Item
                            label="技术种类"
                            name="technologyCategory"
                            rules={[{ required: true, message: '请选择技术种类!' }]}
                        >
                            <Select>
                                {technologyCategoryArr.map((item, index) => {
                                    return (
                                        <Option key={index + 1}>{item}</Option>
                                    )
                                })}
                            </Select>
                        </Form.Item>

                        <Form.Item
                            label="技术的详细信息"
                            name="technicalDetails"
                            rules={[{ required: true, message: '请输入技术的详细信息!' }]}
                        >
                            <TextArea rows={3}></TextArea>
                        </Form.Item>

                        <Form.Item {...tailLayout}>
                            <Button type="primary" htmlType="submit">
                                提交
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>
                <Button style={{marginLeft:962}} type="primary" onClick={this.showModal}>发布技术征求</Button>
                <div style={{marginTop:30}}><SeekTechnologyTable></SeekTechnologyTable></div>
            </BasePage>
        )
    }
}

export default connect()(SeekTechnologyPage)